<template>
  <div>
    <el-form
      :model="studentForm"
      :rules="rules"
      ref="studentForm"
      label-width="100px"
      class="demo-studentForm"
      style="text-align: left"
    >
      <el-form-item label="学生姓名" prop="Name">
        <el-col :span="8">
          <el-input v-model="studentForm.Name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="性别">
        <el-col :span="8">
          <el-radio-group v-model="studentForm.Sex">
            <el-radio label="true">男</el-radio>
            <el-radio label="false">女</el-radio>
          </el-radio-group></el-col
        >
      </el-form-item>
      <el-form-item label="年龄" prop="Age">
        <el-col :span="8">
          <el-input v-model="studentForm.Age"></el-input
        ></el-col>
      </el-form-item>
      <el-form-item label="民族" prop="Nation">
        <el-col :span="8">
          <el-select
            v-model="studentForm.Nation"
            placeholder="请选择民族"
            style="width: 385px"
          >
            <el-option
              v-for="item in pNations"
              :value="item.Name"
              :key="item.Id"
              >{{ item.Name }}</el-option
            >
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="是否在校" prop="IsInSchool">
        <el-col :span="8">
          <el-switch v-model="studentForm.IsInSchool"></el-switch>
        </el-col>
      </el-form-item>
      <el-form-item label="爱好" prop="Hobbys" required>
        <el-col :span="8">
          <el-checkbox-group v-model="studentForm.Hobbys">
            <el-checkbox
              v-for="item in pHobbys"
              :label="item.Name"
              :key="item.Id"
              >{{ item.Name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-col>
      </el-form-item>

      <el-form-item label="创建时间" prop="CreateTime" required>
        <el-col :span="8">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="studentForm.CreateTime"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="8">
          <el-button type="primary" @click="submitForm('studentForm')"
            >添加</el-button
          >
          <el-button @click="goback">返回</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pNations: [],
      pHobbys: [],
      studentForm: {
        Name: "小美美美",
        Nation: "傣族",
        CreateTime: new Date(),
        IsInSchool: true,
        Hobbys: ["书法", "拳击"],
        Sex: "true",
        Age: 16,
      },
      rules: {
        Name: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        Nation: [{ required: true, message: "请选择民族", trigger: "change" }],
        CreateTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        Hobbys: [
          {
            required: true,
            message: "请至少选择一个爱好",
            trigger: "change",
          },
        ],
        Age: [{ required: true, message: "请填写年龄", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getnations();
    this.gethobbys();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.add();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    add() {
      this.studentForm.Hobbys = this.studentForm.Hobbys.toString();
      this.$axios({
        url: "http://localhost:53464/api/values/Post",
        method: "post",
        data: this.studentForm,
      })
        .then((res) => {
          if (res.data <= 0) {
            alert("添加失败！！");
            return;
          }
          this.goback();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //返回
    goback() {
      this.$router.push("/Student/student");
    },
    //获取民族集合
    getnations() {
      this.$axios({
        url: "http://localhost:53464/api/values/GetNations",
        method: "get",
      })
        .then((res) => {
          this.pNations = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取爱好集合
    gethobbys() {
      this.$axios({
        url: "http://localhost:53464/api/values/GetHobbys",
        method: "get",
      })
        .then((res) => {
          this.pHobbys = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>